<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>书城首页</title>
	<%@ include file="../../pages/common/head.jsp" %>
</head>
<script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	// 页面加载完成之后
	$(function () {
		// 给加入购物车按钮绑定单击事件
		$("button.addToCart").click(function () {
			/**
			 * 在事件响应的 function 函数 中，有一个 this 对象，这个 this 对象，是当前正在响应事件的 dom 对象
			 * @type {jQuery}
			 */
			var bookId = $(this).attr("bookId");
			//location.href = "http://localhost:8080/book/cartServlet?action=addItem&id=" + bookId;
			// 发 ajax 请求，添加商品到购物车
			$.getJSON("http://localhost:8080/book/cartServlet","action=ajaxAddItem&id=" +
					bookId,function (data) {
				console.log(data)
				 $("#cartTotalCount").text("您的购物车中有 " + data.totalCount + " 件商品");
				 $("#cartLastName").text(data.lastName);
			})
		});
// 给注册绑定单击事件
		$("#sub_btn").click(function () {
// 验证用户名：必须由字母，数字下划线组成，并且长度为 5 到 12 位
//1 获取用户名输入框里的内容
			var usernameText = $("#username").val();
//2 创建正则表达式对象
			var usernamePatt = /^\w{5,12}$/;
//3 使用 test 方法验证
			if (!usernamePatt.test(usernameText)) {
//4 提示用户结果$("span.errorMsg").text("用户名不合法！");
				return false;
			}
// 验证密码：必须由字母，数字下划线组成，并且长度为 5 到 12 位
//1 获取用户名输入框里的内容
			var passwordText = $("#password").val();
//2 创建正则表达式对象
			var passwordPatt = /^\w{5,12}$/;
//3 使用 test 方法验证
			if (!passwordPatt.test(passwordText)) {
//4 提示用户结果
				$("span.errorMsg").text("密码不合法！");
				return false;
			}
// 验证确认密码：和密码相同
//1 获取确认密码内容
			var repwdText = $("#repwd").val();
//2 和密码相比较
			if (repwdText != passwordText) {
//3 提示用户
				$("span.errorMsg").text("确认密码和密码不一致！");
				return false;
			}
// 邮箱验证：xxxxx@xxx.com
//1 获取邮箱里的内容
			var emailText = $("#email").val();
//2 创建正则表达式对象
			var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
//3 使用 test 方法验证是否合法
			if (!emailPatt.test(emailText)) {
//4 提示用户
				$("span.errorMsg").text("邮箱格式不合法！");
				return false;
			}
// 验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。
			var codeText = $("#code").val();
//去掉验证码前后空格
			alert("去空格前：["+codeText+"]")
			codeText = $.trim(codeText);alert("去空格后：["+codeText+"]")
			if (codeText == null || codeText == "") {
//4 提示用户
				$("span.errorMsg").text("验证码不能为空！");
				return false;
			}
			$("span.errorMsg").text("");
		});
	});
</script>
<body>
	
	<div id="header">
			<img class="logo_img" alt="" src="static/img/logo.gif" >
			<span class="wel_word">网上书城</span>
			<div>
				<c:if test="${empty sessionScope.user}">
					<a href="pages/user/login.jsp">登录</a> |
					<a href="pages/user/regist.jsp">注册</a>
				</c:if>
				<c:if test="${not empty sessionScope.user}">
					<span>欢迎<span class="um_span">${sessionScope.user.username}</span>光临尚硅谷书城</span>
					<a href="pages/cart/cart.jsp">购物车</a>
					<a href="pages/manager/manager.jsp">后台管理</a>
				</c:if>
			</div>
	</div>
	<div id="main">
		<div id="book">
			<div class="book_cond">
				<form action="client/bookServlet" method="get">
					<input type="hidden" name="action" value="pageByPrice">
					价格：<input id="min" type="text" name="min" value=""> 元 - 
						<input id="max" type="text" name="max" value=""> 元 
						<input type="submit" value="查询" />
				</form>
			</div>
			<div style="text-align: center">
				<c:if test="${empty sessionScope.cart.items}">
					<%--购物车为空的输出--%>
					<span id="cartTotalCount"> </span>
					<div>
						<span id="cartLastName" style="color: red">当前购物车为空</span>
					</div>
				</c:if>
				<c:if test="${not empty sessionScope.cart.items}">
					<%--购物车非空的输出--%>
					<span id="cartTotalCount">您的购物车中有 ${sessionScope.cart.totalCount} 件商品</span>
					<div>
						您刚刚将<span id="cartLastName" style="color: red">${sessionScope.lastName}</span>加入到了购物车中
					</div>
				</c:if>
			</div>
			<c:forEach items="${requestScope.page.items}" var="book">
			<div class="b_list">
				<div class="img_div">
					<img class="book_img" alt="" src="${book.imgPath}" />
				</div>
				<div class="book_info">
					<div class="book_name">
						<span class="sp1">书名:</span>
						<span class="sp2">${book.name}</span>
					</div>
					<div class="book_author">
						<span class="sp1">作者:</span>
						<span class="sp2">${book.author}</span>
					</div>
					<div class="book_price">
						<span class="sp1">价格:</span>
						<span class="sp2">￥${book.price}</span>
					</div>
					<div class="book_sales">
						<span class="sp1">销量:</span>
						<span class="sp2">${book.sales}</span>
					</div>
					<div class="book_amount">
						<span class="sp1">库存:</span>
						<span class="sp2">${book.stock}</span>
					</div>
					<c:if test="${sessionScope.user!=null}">
						<div class="book_add">
							<button bookId="${book.id}" class="addToCart">加入购物车</button>
						</div>
					</c:if>

				</div>
			</div>
			</c:forEach>
		</div>

		<%@include file="/pages/common/page_nav.jsp"%>
	
	</div>
	
	<div id="bottom">
		<span>
			尚硅谷书城.Copyright &copy;2015
		</span>
	</div>
	<Script type="text/javascript">
	</Script>
</body>
</html>